<template>
  <div>
    <Form ref="from" :rules="rules" :model="form" :label-width="80">
      <FormItem label="账号" prop="username">
        <Input v-model="form.username" style="width: 350px" placeholder="请输入账号"></Input>
      </FormItem>
      <FormItem label="姓名" prop="name">
        <Input v-model="form.name" style="width: 350px" placeholder="请输入姓名"></Input>
      </FormItem>
      <FormItem label="密码" prop="password">
        <Input v-model="form.password" style="width: 350px" placeholder="请输入密码"></Input>
      </FormItem>
      <FormItem label="邮箱" prop="email">
        <Input v-model="form.email" style="width: 350px" placeholder="请输入邮箱"></Input>
      </FormItem>
      <FormItem label="地址" prop="address">
        <Input v-model="form.address" style="width: 350px" placeholder="请输入地址"></Input>
      </FormItem>
      <FormItem label="性别" prop="sex">
        <Select v-model="form.sex">
          <Option v-for="item in cityList" :value="item.value" v-model="item.value" :key="item.value">{{ item.name }}
          </Option>
        </Select>
      </FormItem>
      <FormItem label="出生日期" size="mini" prop="birthday">
        <DatePicker v-model="form.birthday" type="date" placeholder="请选择日期"
                    style="width: 200px"></DatePicker>
      </FormItem>
      <FormItem label="电话" prop="tel">
        <Input v-model="form.tel" style="width: 350px" placeholder="请输入电话"></Input>
      </FormItem>
      <FormItem label="用户类型" style="width: 200px;" prop="type">
        <Select v-model="form.type">
          <Option v-for="item in typeList" :value="item.value" v-model="item.value" :key="item.value">{{ item.name }}
          </Option>
        </Select>
      </FormItem>
      <FormItem label="用户状态" style="width: 200px;" prop="state">
        <Select v-model="form.state">
          <Option v-for="item in stateList" :value="item.value" v-model="item.value" :key="item.value">{{ item.name }}
          </Option>
        </Select>
      </FormItem>
      <form-item>
        <Button type="primary" @click="add">提交</Button>
        <Button type="text" @click="remove">取消</Button>
      </form-item>
    </Form>
  </div>
</template>

<script>
import axiosInstance from "@/api/axios";
import axios from "axios";

export default {
  name: "demo",
  data() {
    return {
      form: {
        name: null,
        email: null,
        address: null,
        tel: null,
        password: null,
        username: null,
        birthday: null,
        type: null,
        sex: null,
        state:null,
      },
      cityList: [
        {
          name: '男',
          value: '男',
        },
        {
          name: '女',
          value: '女'
        }
      ],
      typeList: [
        {
          name: '管理员',
          value: '管理员'
        },
        {
          name: '读者',
          value: '读者'
        }
      ],
      stateList: [
        {
          name: '正常',
          value: '正常'
        },
        {
          name: '异常',
          value: '异常',
        }
      ],
      rules:{
        name:[{required:true,message:'请输入姓名'}],
        email: [{required:true,message:'请输入邮箱'}],
        address:[{required:true,message:'请输入地址'}],
        tel: [{required:true,message:'请输入电话'}],
        password: [{required:true,message:'请输入密码'}],
        username: [{required:true,message:'请输入账号'}],
        birthday: [{required:true,message:'请输入日期'}],
        type: [{required:true,message:'请输入用户类型'}],
        sex: [{required:true,message:'请输入性别'}],
        state: [{required:true,message:'请输入用户状态'}],
      }
    }
  },
  methods: {
    add() {
      this.$refs['from'].validate(valid => {
        if (valid) {
          // this.form.birthday=(new Date(this.form.birthday)).toLocaleDateString()
          this.http.post("create",this.form).then(res=>{
            if (res.data){
              this.$Message.success('添加成功')
              this.$emit('hideDialog')
              this.$emit('after')
            }else {
              this.$Message.error('添加失败')
            }
          })
        }
      })
    },
    remove() {
      this.$emit('hideDialog')
    },

  }
}
</script>

<style scoped>

</style>